<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@include file="/WEB-INF/views/include/root.jsp"%>

<html>
<head>
<base href="${ctx}">
<title id="a">login</title>
<script src="${ctx}/static/backstretch/jquery.backstretch.min.js"></script>
</head>
<body>
	<div class="container">
		<div id="loginbox" style="margin-top: 50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<div class="panel-title">
						<h4>Photo</h4>
					</div>
				</div>
				<div style="padding-top: 30px" class="panel-body">
					<form id="inputForm" method="post" class="form-horizontal">
						<!-- 账号 -->
						<div style="margin-bottom: 25px" class="input-group">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-user"></i>
							</span> 
							<input id="username" type="text" class="form-control input-lg" name="username" value="${username}" placeholder="用户名" style="width: 100%;">
						</div>
						<!-- 密码 -->
						<div style="margin-bottom: 25px" class="input-group">
							<span class="input-group-addon">
								<i class="glyphicon glyphicon-lock"></i>
							</span> 
							<input id="password" type="password" class="form-control input-lg" name="password" placeholder="密码" style="width: 100%;">
						</div>
						<!-- 记住我 -->
						<div class="input-group">
							<div class="checkbox" style="margin-left: 16px;">
								<label> 
									<input id="rememberMe" type="checkbox" name="rememberMe"> 记住我
								</label>
							</div>
						</div>
						<!-- 错误提示 -->
						<h4 id="errInfo" disabled="disabled">${errMsg}</h4>
						<!-- 登录按钮 -->
						<div style="margin-top: 10px" class="form-group">
							<!-- Button -->
							<div class="col-sm-12 controls">
								<input id="btn_submit" class="btn btn-primary btn-lg btn-block" type="button" value="系统登录" />
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(
				function() {
					$.backstretch([
							"${ctx}/static/backstretch/images/pot-holder.jpg",
							"${ctx}/static/backstretch/images/coffee.jpg",
							"${ctx}/static/backstretch/images/dome.jpg" ], {
						fade : 750,
						duration : 1500
					});

					$("#btn_submit").click(function() {
						var username = $("#username").val();
						var password = $("#password").val();
						var action = 'loginAuthentication';
						var baseUrl = "${ctx}";
						$.post("${ctx}/LoginController", {
							username : username,
							password : password,
							action : action
						}, function(data, status) {
							if ("loginSuccess" == data) {
								window.location.href = baseUrl + "/index.jsp";
							} else {
								alert("账号名或密码错误");
							}
						});
					});
				});
	</script>
</body>
</html>
